<template>
    <div>
        <div class="pagination">
            <el-pagination :current-page="data.page" :page-size="data.limit" :page-sizes="[1, 10, 20, 30, 40, 50]"
                layout="total, sizes, prev, pager, next, jumper" :total="data.count" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'


// 通过defineProps接收父组件的值
const getpgData = defineProps({
    // 接收传值   此处的father就是父组件的自定义名称 
    data: {
        type: Object,  // 数据类型
        default: "未传值"  // 未传值时的默认值
    }
})
let data = getpgData.data

/**
 * 分页
 */

// 子组件值
const backlm = ref()
const backpg = ref()
const handleSizeChange = (val: number) => {
    console.log(`${val} 条数据`)
    backlm.value = val
    backlimit()
}
const handleCurrentChange = (val: number) => {
    console.log(`第 ${val}页`)
    let count = data.count / backlm.value
    if (val > count) {
        console.log(count);
    }
    backpg.value = val
    backPage()
}

// 子传父通过数组的形式传值，定义子传父的事件defineEmits([自定义名称])
const emit = defineEmits(['setlm', 'setpg'])

const backlimit = () => {
    // 通过emit来定义自定义名称和值，setlm为名称，{backStatus:backStatus.value}为值
    emit('setlm', { backStatus: backlm.value }) // 回传
}
const backPage = () => {
    emit('setpg', { backStatus: backpg.value }) // 回传
}
</script>
<style scoped>
.pagination {
    margin-top: 10px;
}
</style>
